<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'

	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'

	import {
		qryShopApi,
		qrySpListApi
	} from '@/api/home.js'
	import {
		useLongLatStore
	} from '@/stores/index'

	// 经纬度
	const longLatStore = useLongLatStore()
	// 全局页面数据
	const data = reactive({
		searchValue: '',
		screenActive: '0',
		currentCity: {},
		venueList: [],
		coachList: [],

		latitude: '',
		longitude: '',
		currentCity: {},
	})


	// 历史记录列表
	const historyList = ref([])

	const type = ref()
	onLoad((option) => {
		// 获取当前城市是否已选择
		data.currentCity = uni.getStorageSync('currentCity') || {}

		console.log('option: ======', option);
		type.value = option.type

		historyList.value = uni.getStorageSync('historyList') || [];

	})


	// 搜索场馆
	async function getSearchVenues() {
		return new Promise((resolve, reject) => {
			qryShopApi({
				pageSize: 10,
				pageNum: 1,

				latitude: longLatStore.info.latitude,
				longitude: longLatStore.info.longitude,
				cityCode: data.currentCity.code,
				qryType: 1,
				shopName: data.searchValue,
				orderByTypeList: data.screenActive == '0' ? [] : [data.screenActive]
			}).then(res => {
				data.venueList = res.data
				console.log('res:=== ', res);
				resolve('hello world')
			})
		});
	}

	// 搜索教练

	async function getSearchCoach() {
		return new Promise((resolve, reject) => {
			qrySpListApi({
				pageSize: '999',
				pageNum: '1',
				latitude: longLatStore.info.latitude,
				longitude: longLatStore.info.longitude,
				cityCode: data.currentCity.code,
				spName: data.searchValue,
			}).then(res => {
				res.data.map((item) => {
					item.tagLabel = item.tagLabel.split("|")
				})
				data.coachList = res.data
				// console.log('res: ', res);
				resolve('hello world')
			})
		});
	}

	const emptyState = ref(false)

	// 点击搜索
	async function searchClick() {
		console.log('searchClick===');
		console.log(type.value, 'type.value');

		if (type.value !== '3') {
			// 搜索场馆
			await getSearchVenues()
		}
		if (type.value !== '2') {
			// 搜索教练
			await getSearchCoach()
		}
		// 是否显示空状态
		emptyState.value = true
		if (historyList.value.length >= 10) {
			historyList.value.pop()
		}
		historyList.value.unshift(data.searchValue)
		uni.setStorageSync('historyList', historyList.value);

		// nextTick(() => {
		// })
		console.log('historyList.value: ', historyList.value);

	}

	// 删除
	const deleteClick = () => {
		// 清除本地存储中的历史记录数据
		uni.removeStorageSync('historyList');
		historyList.value = [];
	}
</script>

<template>
	<view class="search-page">
		<view class="search-box">
			<up-search v-model="data.searchValue" borderColor="#008043" bgColor="#F6F6F6" :focus="true"
				placeholder="请输入搜索内容" inputAlign="left" height="64rpx" @custom="searchClick"></up-search>
		</view>
		<!-- 内容区域 -->
		<view class="content-box">
			<view v-if="!emptyState" class="history-box">
				<view class="head">
					<view class="name">历史记录</view>
					<view class="del-box" @click="deleteClick">
						<up-icon name="trash"></up-icon>
						<text>删除</text>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, index) in historyList" :key="index">{{ item }}</view>
				</view>
			</view>
			<view v-else class="result-box">
				<!-- 空状态 -->
				<view v-if="data.venueList.length===0&&data.coachList.length===0&&emptyState"
					style="padding-top: 294rpx;">
					<u-empty mode="address" width="150" height="150" textColor="#838385"
						icon="https://image.nanjingtouyang.com/touy/2023/10/2023103113051755879.png"
						text="暂时没有您想要的结果~"></u-empty>
				</view>
				<view v-else class="result-list-box">
					<view class="venue-box" v-if="type!=='3'">
						<view class="title">搜索场馆</view>

						<view class="list">
							<view class="item" v-for="item in data.venueList" :key="item" @click="goToDetail">
								<view class="top">
									<view class="logo-box">
										<image :src="item.shopMainPic" style="width: 112rpx;height: 112rpx;"
											mode="scaleToFill" />
									</view>
									<view class="info">
										<view class="head">
											<text class="name">{{ item.shopName }}</text>
											<view class="distance-box">
												<image src="/static/images/icons/icon_address2.png"
													mode="scaleToFill" />
												<text class="distance">{{ item.distanceLabel }}</text>
											</view>
										</view>
										<view class="center">
											<view class="rate">
												<!-- 选择半星 -->
												<up-icon v-if="!item.shopScore" name="star" color="#C0C4CC"
													size="20"></up-icon>
												<up-icon v-else name="star-fill" color="#FFB13B" size="20"></up-icon>
												<text>{{ item.shopScore || '暂无评价' }}</text>
											</view>
											<view class="tags">
												<text v-for="tag in item.tshopTagList" :key="tag" class="card">{{ shopTagList.filter(Tag =>
                          Tag.dictValue == tag)[0].dictLabel }}</text>
											</view>
										</view>
										<view class="consumption-records">
											<text>{{ item.orderCount || 0 }}人消费</text>
											<text class="tag">{{ prodBuyDesc || '暂无预约' }}</text>
										</view>
									</view>
								</view>
								<view v-if="item.shopDetailPic" class="images">
									<view class="item" v-for="(picImg, index) in item.shopDetailPic.split(',')"
										:key="index" :class="'item' + index">
										<image :src="picImg" style="width: 208rpx; height: 188rpx;"
											mode="scaleToFill" />
										<!-- <iamge :src="pic"  /> -->
									</view>
								</view>
								<view class="bottom">
									<rich-text :nodes="item.shopDesc"></rich-text>
									<!-- <text class="introduce">“{{ item.shopDesc }}”</text> -->
									<view class="price-box">
										<text class="price">￥{{ item.lowPrice }}</text><text class="unit">/次</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="coach-box" v-if="type!=='2'">
						<view class="title">搜索教练</view>
						<view class="list">
							<view v-for="item in data.coachList" :key="item.spId"
								style="padding: 24rpx;	background-color: #fff;margin: 20rpx 0 ;"
								@click="goCoachDetai(item)">
								<view class="item">
									<!-- <view class="left"> -->
									<image :src="item.spAvatar" style="width: 168rpx;height: 224rpx;"
										mode="aspectFill" />
									<view class="right">
										<view style="    margin-left: 30rpx;">
											{{item.spName}}
										</view>
										<view
											style="display: flex; margin:  18rpx 0 0 30rpx;  line-height: 22rpx; justify-content: space-between;">
											<view style="display: flex;">
												<image src="/static/images/icons/vector.png" mode=""
													style="width: 20rpx; height: 18rpx;"></image>
												<text style="font-size: 22rpx;">{{item.shopName}}</text>
											</view>
											<view style="display: flex;">
												<image src="/static/images/icons/icon_address1.png" mode=""
													style="width: 14rpx; height: 18rpx;"></image>
												<text style="font-size: 22rpx;">{{item.distanceLabel}}</text>
											</view>
										</view>
										<view style="  width: 444rpx;  margin: 18rpx 0 4rpx 18rpx;">

											<view style="  display: flex;">
												<view class="guidance" v-for="(it,ind) in item.tagLabel" :key="ind">
													{{it}}
												</view>

											</view>
											<view class="score">
												<view class="score_view" style="color: #FF9D68;">{{item.score}}</view>
												<view class="score_view"
													style="border-left: 1rpx solid #ccc;border-right: 1rpx solid #ccc">
													{{item.serviceTime}}
												</view>
												<view class="score_view" style="">{{item.workYears}}</view>
											</view>
											<view style="    text-align: center; display: flex;">
												<view class="score_view" style="width: 33.3%;font-size: 20rpx;">客户评分
												</view>
												<view class="score_view" style="width: 33.3%;font-size: 20rpx;">服务时长
												</view>
												<view class="score_view" style="width: 33.3%;font-size: 20rpx;">从业年限
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class=""
									style="   margin-top: 20rpx;display: flex;  justify-content: space-between;align-items: center;">

									<text style="white-space: nowrap;"><text
											style="color: #3F9742;font-size: 36rpx;">¥{{item.price}}</text>/次</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.search-page {
		.score {
			margin: 10rpx 0;
			text-align: center;
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			// width: 444rpx;

			.score_view {
				width: 33.3%;

			}
		}





		.search-box {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			padding: 12rpx 32rpx;
			width: 100vw;
			background-color: #fff;

			&::v-deep .u-search {
				& .u-search__action {
					// display: flex;
					// align-items: center;
					// justify-content: center;
					margin-left: 24rpx;
					width: 144rpx;
					height: 64rpx;
					line-height: 64rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					background: #303133;
					border-radius: 80rpx;
				}
			}
		}

		// 内容区域
		& .content-box {
			padding-top: 88rpx;

			// 历史记录
			& .history-box {
				margin-top: 28rpx;
				padding: 0 32rpx;

				& .head {
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .name {
						font-weight: 500;
						font-size: 24rpx;
						color: #838385;
					}

					& .del-box {
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #838385;

						& text {
							margin-left: 8rpx;
						}
					}
				}

				& .list {
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 24rpx;

					& .item {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 12rpx 32rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #303133;
						border: 2rpx solid #D9D9D9;
						border-radius: 8rpx;
					}
				}
			}

			// 搜索结果
			& .result-box {

				// 搜索结果列表数据
				& .result-list-box {
					padding: 0 32rpx;
					padding-bottom: 182rpx;
					min-height: calc(100vh - 88rpx);
					background-color: #F6F6F6;

					& .venue-box {
						margin-top: 44rpx;

						& .title {
							font-weight: 500;
							font-size: 28rpx;
							color: #303133;
						}

						& .list {
							&>.item {
								box-sizing: border-box;
								margin-top: 16rpx;
								padding: 24rpx;
								width: 686rpx;
								// height: 448rpx;
								background: #FFFFFF;
								border-radius: 24rpx 24rpx 24rpx 24rpx;

								& .top {
									display: flex;
									align-items: center;
									justify-content: space-between;

									& .logo-box {
										width: 112rpx;
										height: 112rpx;
										border-radius: 50%;
										overflow: hidden;
									}

									& .info {
										width: 508rpx;

										& .head {
											display: flex;
											align-items: center;
											justify-content: space-between;

											& .name {
												font-family: PingFang SC, PingFang SC;
												font-weight: 500;
												font-size: 28rpx;
												color: #303133;
												line-height: 33rpx;
												text-align: left;
												font-style: normal;
												text-transform: none;
											}

											& .distance-box {
												& image {
													width: 21rpx;
													height: 21rpx;
												}

												& .distance {
													font-family: PingFang SC, PingFang SC;
													font-weight: 400;
													font-size: 20rpx;
													color: #838385;
													line-height: 23rpx;
													text-align: left;
													font-style: normal;
													text-transform: none;
												}
											}
										}

										& .center {
											display: flex;
											align-items: center;
											margin-top: 11rpx;

											& .rate {
												display: flex;
												align-items: center;

												& text {
													margin-left: 8rpx;
													font-family: PingFang SC, PingFang SC;
													font-weight: 500;
													font-size: 28rpx;
													color: #303133;
													line-height: 33rpx;
													text-align: left;
													font-style: normal;
													text-transform: none;
												}
											}

											& .tags {
												display: flex;
												align-items: center;

												& .card {
													padding: 4rpx 12rpx;
													margin-left: 12rpx;
													font-family: PingFang SC, PingFang SC;
													font-weight: 400;
													font-size: 18rpx;
													color: #838385;
													line-height: 21rpx;
													text-align: left;
													font-style: normal;
													text-transform: none;
													background: #F5F7F6;
													border-radius: 4rpx 4rpx 4rpx 4rpx;
												}
											}
										}

										& .consumption-records {
											margin-top: 7rpx;
											font-family: PingFang SC, PingFang SC;
											font-weight: 400;
											font-size: 20rpx;
											color: #838385;
											line-height: 23rpx;
											text-align: left;
											font-style: normal;
											text-transform: none;

											& .tag {
												margin-left: 8rpx;
												color: #00B608;
											}
										}
									}
								}

								& .images {
									display: flex;
									align-items: center;
									justify-content: space-between;
									margin-top: 28rpx;

									& .item {
										width: 204rpx;
										height: 188rpx;
										background-color: #ccc;
										overflow: hidden;

										&:first-child {
											border-radius: 24rpx 0rpx 0rpx 24rpx;
										}

										&:last-child {
											border-radius: 0rpx 24rpx 24rpx 0rpx;
										}
									}
								}

								& .bottom {
									margin-top: 10rpx;
									display: flex;
									align-items: center;
									justify-content: space-between;

									& .introduce {
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 24rpx;
										color: #838385;
										line-height: 28rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}

									& rich-text {
										width: 500rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 24rpx;
										color: #838385;
										line-height: 28rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}

									& .price-box {
										margin-top: 20rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 20rpx;
										color: #838385;
										line-height: 23rpx;
										font-style: normal;
										text-transform: none;
										text-align: right;

										& .price {
											font-family: PingFang SC, PingFang SC;
											font-weight: 500;
											font-size: 36rpx;
											line-height: 42rpx;
											text-align: left;
											font-style: normal;
											text-transform: none;
											background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
											background-clip: text;
											-webkit-background-clip: text;
											-webkit-text-fill-color: transparent;

										}
									}
								}
							}
						}
					}

					& .coach-box {
						margin-top: 40rpx;

						& .title {
							font-weight: 500;
							font-size: 28rpx;
							color: #303133;
						}

						& .list {
							& .item {
								display: flex;
								// align-items: center;
								// justify-content: space-between;
								margin-top: 24rpx;
								// height: 218rpx;
								background: #FFFFFF;

								& .left {
									width: 168rpx;
									height: 224rpx;
								}

								& .right {

									.goldMedalCoach {
										margin-left: 10rpx;
										font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
										font-weight: 400;
										font-size: 20rpx;
										color: #FFFFFF;
										line-height: 28rpx;
										text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
										text-align: center;
										font-style: normal;
										text-transform: none;
										padding: 6rpx 10rpx 6rpx 10rpx;
										background: linear-gradient(121deg, #30BD25 0%, #6BE861 100%);
										border-radius: 0rpx 12rpx 12rpx 12rpx;

									}

									.guidance {
										margin-left: 11rpx;
										white-space: nowrap;
										background-color: #ccc;
										padding: 4rpx 12rpx !important;
										border-radius: 20rpx;
										font-size: 20rpx;
										width: 138rpx !important;
										text-align: center;
									}


								}
							}
						}
					}
				}
			}
		}
	}
</style>